<template>
	<view>
		<Navbar :isReturn="false"></Navbar>
		<!-- <Message :data="trendData" :type="2"></Message> -->

		<StickyTop :top="navbarHeight()">
			<view class="u-back-white u-m-20 u-p-t-20 u-p-b-10 u-radius-20 u-common-shadow">
				<view class="u-m-l-20 u-m-r-20">
					<u-search bg-color="#F3F4F6" height="80" placeholder="请输入活动关键词" v-model="keyword"
						:show-action="false" @search="activitySearch" @clear="activitySearch"></u-search>
				</view>
				<u-tabs bg-color="#fff" active-color="#B3723E" :current="activity.current" :list="activity.typeList"
					@change="activityChange"></u-tabs>
			</view>
		</StickyTop>
		<view class="u-m-20">
			<ActivityList :list="list" @goActivityDetial="goActivityDetial"></ActivityList>
		</view>
		<Loadmore :status="status"></Loadmore>
		
		<!-- 确认弹出框 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :cancelText="modal.cancelText"
			:modalContent="modal.content" :showCancel="modal.showCancel" :showConfirm="modal.showConfirm"
			@cancel="modal.show = false" @confirm="modalConfirm"></Modal>

		<Tabbar></Tabbar>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Tabbar from '@/components/Tabbar.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import ActivityList from './component/ActivityList.vue'
	import StickyTop from '@/components/StickyTop.vue'
	import Message from '@/components/Message.vue'
	import Modal from '@/components/Modal.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import share from '@/mixins/share.js'
	import {
		getActivityList,
		activityType,
		activityNumber
	} from '@/network/demand.js'
	import {
		getShare
	} from '@/network/api.js'
	export default {
		mixins: [reachBottom, share],
		components: {
			Navbar,
			Tabbar,
			Loadmore,
			ActivityList,
			StickyTop,
			Message,
			Modal
		},
		data() {
			return {
				/* 活动数据 */
				activity: {
					typeList: [],
					current: 0,
					typeId: ''
				},
				trendData: {},
				keyword: '',
				list: [],
				timeOut: null,
				modal: {
					show: false,
					showCancel: true,
					showConfirm: true,
					confirmText: '申请',
					cancelText: '取消',
					content: ''
				}
			}
		},
		onLoad() {
			this.getActivityType()
			this.getList()
		},
		onShow() {
			this.getActivityNumber()
		},
		onPullDownRefresh() {
			this.activitySearch()
			this.timeOut = setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onHide() {
			clearTimeout(this.timeOut)
		},
		methods: {
			activityChange(val) {
				this.activity.current = val
				this.activity.typeId = this.activity.typeList[val].id
				this.page = 1
				this.list.length = 0
				this.status = 'loadmore'
				this.getList()
			},
			getActivityType() {
				activityType().then(res => {
					res.data.unshift({
						id: '',
						name: '全部'
					})
					this.activity.typeList = res.data
				})
			},
			getActivityNumber() {
				activityNumber({
					user_id: uni.getStorageSync("user_id")
				}).then(res => {
					this.trendData = res.data
				})
			},
			handleGetShare() {
				getShare({
					key: 'activity'
				}).then(res => {
					res.data.page = `${res.data.page}?inviterId=${uni.getStorageSync("user_id")}`
					this.mixinsShare = res.data
				})
			},
			goActivityDetial(val) {
				if (uni.getStorageSync("user_isBlack") == 0) {
					uni.navigateTo({
						url: "/pages/activityDetail/activityDetail?id=" + val.id
					})
				} else {
					this.modal.content = '当前用户权限受限，请联系系统管理员'
					this.modal.confirmText = '确定'
					this.modal.show = true
				}
			},
			getList() {
				uni.showLoading({
					title: "加载中"
				})
				let require = getActivityList
				const params = {
					page: this.page,
					limit: this.pageSize,
					type_id: this.activity.typeId,
					keyword: this.keyword,
					user_id: uni.getStorageSync("user_id")
				}
				require(params).then(res => {
					this.trends_number = res.data.trends_number
					if (res.data.list.length > 0) {
						res.data.list.map(item => this.list.push(item))
					}
					if (res.data.list.length < 10) this.status = 'nomore'
					uni.hideLoading()
				})
			},
			activitySearch() {
				this.page = 1
				this.list.length = 0
				this.status = 'loadmore'
				this.getList()
			},
			loadData() {
				if (this.status == 'nomore') return
				this.page++
				this.status = 'loading'
				this.getList()
			},
			navbarHeight() {
				let topHeight = 0
				let height = uni.getDeviceInfo().system.includes('iOS') ? 44 : 48;
				topHeight = height + uni.getWindowInfo() + 44 + 30
				return `${topHeight}rpx`
			},
			modalConfirm() {
				this.modal.show = false
			}
		}
	}
</script>

<style>
</style>